<template>
  <div class="approval-time-pora">
    <a-timeline>
      <a-timeline-item v-for="(i, index) in approvalLogArr" :key="index">
        <span slot="dot" class="approval-dot"></span>
        <div class="approval-time-pora-item">
          <a-avatar icon="user" :src="i.approverUserAvatar" :size="33" class="approval-time-pora-avatar" />
          <div style="display: inline-block;">
            <div class="approval-time-jiedian">{{ i.approverUserName }}</div>
            <div class="approval-time-name">
              <!-- {{ i.userName
              }}<span v-if="i.actionType && i.actionType != 0">{{
                getApprovalType(i.actionType)
              }}</span>-->
            </div>
          </div>
          <div class="approval-time-fq" v-if="index == '0'">{{ i.approverOpinion }}</div>
          <div v-else class="approval-time-content">
            <span v-if="index !== '0'">{{ i.status === 2 ? "审批通过" : i.status === 3 ? "审批拒绝" : "" }}</span
            ><span v-if="i.approverOpinion">，审批意见:{{ i.approverOpinion }}</span>
          </div>
        </div>

        <div class="approval-time-time">
          {{ moment(i.gmtCreate).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>
<script>
import moment from "moment";
import { getApprovalStatus, getApprovalType } from "../funcs";
export default {
  props: ["approvalLog"],
  data() {
    return {
      approvalLogArr: []
    };
  },
  methods: {
    getApprovalStatus,
    getApprovalType
  },
  watch: {
    approvalLog: {
      handler(val) {
        const arr = [];
        const valARR = val;
        this.approvalLogArr = [];
        valARR.map(i => {
          if (i.userFlowApproverList !== null) {
            arr.push(...i.userFlowApproverList.filter(i => i.status === 2 || i.status === 3));
          }
        });
        this.approvalLogArr = arr;
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style scoped>
.approval-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #6b6bf2;
  border-radius: 50%;
}
.approval-time-pora {
  position: relative;
  margin-left: 180px;
  padding-top: 20px;
}
.approval-time-time {
  position: absolute;
  top: 0;
  left: -189px;
  font-size: 14px;
  font-weight: 400;
  color: #a6a8b4;
  line-height: 21px;
}
.approval-time-jiedian {
  font-size: 14px;
  font-weight: 500;
  color: #55565d;
  line-height: 21px;
}
.approval-time-name {
  font-size: 12px;
  font-weight: 400;
  color: #a6a8b4;
  line-height: 18px;
}
.approval-time-content {
  width: 480px;
  background: #f4f6fa;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #55565d;
  line-height: 21px;
  margin: 5px 0;
}
.approval-time-pora-avatar {
  vertical-align: middle;
  margin-right: 5px;
}
.approval-time-fq {
  font-size: 12px;
  color: #767885;
  padding: 10px 0;
}
.approval-time-pora .approval-time-pora-item {
  padding-left: 10px;
}
</style>
